{% extends 'usercenter-base.html' %}
{% block title %}我的作业- 慕学在线网{% endblock %}
{% load staticfiles %}
{% block custom_css %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{% static '' %}css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="{% static '' %}css/muke/course/common-less.css">



{% endblock %}
{% block custom_bread %}
     <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'users:info' %}">个人中心</a>></li>
                <li>成绩统计</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block rigt_form %}
<div class="right" >
            <div class="personal_des Releasecont">
                <div class="head">
                    <h1>成绩统计</h1>
                </div>
            </div>
            <div class="personal_des permessage">
                <div class="head">
                    <ul class="tab_header messagehead">
                        <li ><a href="{% url 'users:my_grade_classfication' %}">作业成绩区间统计</a></li>
                         <li class="active"><a href="">话题讨论次数统计</a></li>
                        <li><a href="{% url 'users:my_score_list' %}">成绩列表</a></li>
                         <li><a href="{% url 'users:my_discuss_list' %}">话题人数</a></li>
                    </ul>

                </div>
                <div class="companycenter">

                <div class="messagelist">
                    <div class="messages" class="messages" style="border-bottom: 1px solid #edf1f2;">
                         <div id="main" style="width: 950px;height:450px;position: center"></div>
                    </div>
                </div>
                </div>
                <div class="pageturn pagerright">
              <ul class="pagelist">
             {% if data.has_previous  %}
                 <li class="long"><a href="?page={{data.previous_page_number}}">上一页</a></li>
            {%endif%}

                {% for i in   data.paginator.page_range %}
                 {%if i == data.number  %}
                     <li class="active"><a href="?page={{ i }}">{{i }}</a></li>
                    {% else %}
                      <li><a href="?page={{ i }}" class="page">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if data.has_next  %}
                 <li class="long"><a href="?page={{data.next_page_number}}">下一页</a></li>
            {%endif%}
            </ul>
            </div>
            </div>
        </div>
{% endblock %}

{% block custom_js %}
    <script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
{% for item in data %}
option = {
  title: {
    text: '{{ item.title }}',
    subtext: '话题讨论人数',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: {{ item.data|safe }},
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
{% endfor %}
option && myChart.setOption(option);
</script>
{% endblock %}

